<template>
	<view class="page">
		<view class="swiper">
			<swiper class="s_swiper" :circular="true" :autoplay="true" :interval="5000" @change="swiperChange">
				<swiper-item class="s_swiper_item" v-for="(item,index) in data.images" @click="prevImage(index,data.images)">
					<image class="s_swiper_image" :src="item" />
				</swiper-item>
			</swiper>
			<view class="indicator" v-if="data.images">
				<text>{{current}}/{{data.images.length}}</text>
			</view>
		</view>
		<view class="content">
			<view class="one">
				<view class="price">
					<view class="money">
						<view>到手价</view>
						<view>
							<text class="new bold"><text>￥</text>{{data.price}}</text>
							<text class="old">￥{{data.price}}</text>
						</view>
					</view>
					<!-- <view class="back after">
						<view>
							<view>预估下单返</view>
							<view class="bold">{{data.sharePrice}}</view>
						</view>
					</view> -->
					<view class="sales after">
						<view>
							<view>月销</view>
							<view>{{data.sales}}</view>
						</view>
					</view>
				</view>
				<view class="title">
					<view class="tag tag_red" v-if="bigcate==1">拼多多</view>
					<view class="tag tag_black" v-if="bigcate==2">抖音</view>
					<text>{{data.title}}</text>
				</view>
				<!-- <view class="coupon" v-if="data.couponPrice>0">
					<image src="/static/coupon.png" class="bg"></image>
					<view class="info">
						<view class="c_money">￥{{data.couponPrice}}</view>
						<view class="flex1">
							<view>专属优惠券</view>
							<view>2024.02.02-2024.03.02</view>
						</view>
						<view>立即领券</view>
					</view>
				</view> -->
			</view>
			<view class="after_two">
				<view class="two">
					<image src="/static/business/set/7.png" mode="widthFix"></image>
					<text>{{data.shop_name}}</text>
				</view>
				<view class="af_bt">最高补贴{{data.btrate}}</view>
				<view class="af_bt" v-if="data.sharePrice&&data.sharePrice!=''">分享{{data.sharePrice}}</view>
			</view>
			<view class="detail">
				<view class="sub">商品详情</view>
				<image class="s_swiper_image" mode="widthFix" @click="prevImage(index,data.detail_images)" :src="item" v-for="(item,index) in data.detail_images" />
			</view>
		</view>
		<view class="buttons">
			<!-- <view class="button" @click="share" v-if="isShow">
				<view>分享奖</view>
				<view>￥{{data.cosFee}}</view>
			</view> -->
			<view class="button go" :class="{'w100':!isShow}" @click="goBuy">
				<!-- <view>下单省</view> -->
				<!-- <view>￥{{data.cosFee}}</view> -->
				立即下单
			</view>
		</view>
		<!-- <uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="p_list">
				<button class="p_item" open-type="share">
					<image src="/static/wx.png"></image>
					<view>微信好友</view>
				</button>
				<view class="p_item" @click="sharePYQ">
					<image src="/static/pengyouquan.png"></image>
					<view>分享朋友圈</view>
				</view>
			</view>
		</uni-popup> -->
		<uni-popup ref="alertDialog" type="center">
			<view class="buyAlert">
				<!-- <view class="tit">复制成功</view> -->
				<view class="link">{{link}}</view>
				<button @click="goCopy">复制这条信息，打开dou音</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				id: 0,
				data: [],
				bigcate: 1,
				link: '',
				linkinfo: [],
				code: 200,
				isShow: false,
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.bigcate = option.type;
			this.getDetail();
			if (uni.getStorageSync('level')[4] || uni.getStorageSync('level')[5] || uni.getStorageSync('level')[6] || uni
				.getStorageSync('level')[8]) {
				this.isShow = true;
			}
		},
		methods: {
			goCopy() {
				let that = this;
				uni.setClipboardData({
					data: that.link,
					success: function() {
						that.$refs.alertDialog.close()
					}
				});
			},
			goBuy() {
				let that = this;
				if (that.bigcate == 1) {
					uni.navigateToMiniProgram({
						appId: that.linkinfo.app_id, //跳转的小程序的aooId
						path: that.linkinfo.page_path, //如果这里不填，默认是跳转到对方小程序的主页面
						success(res) {
							// 打开成功
						}
					})
				} else if (that.bigcate == 2) {
					console.log(that.link)
					that.$refs.alertDialog.open()
				}
			},
			sharePYQ() {
				let that = this;
				if (that.code == 200) {
					uni.setClipboardData({
						data: that.link,
						success: function() {
							that.$refs.popup.close()
						}
					});
				} else if (that.code == 30004) {
					console.log(30004)
					uni.showModal({
						title: '提示',
						content: '未授权无法分享，是否现在去授权？',
						success: function(res) {
							that.$refs.popup.close();
							if (res.confirm) {
								uni.navigateToMiniProgram({
									appId: that.linkinfo.app_id, //跳转的小程序的aooId
									path: that.linkinfo.page_path, //如果这里不填，默认是跳转到对方小程序的主页面
									success(res) {
										// 打开成功
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			onShareAppMessage() {
				return {
					title: this.data.title,
					path: '/pages/taobao/detail?id=' + this.data.id + '&type=' + this.bigcate
				}
			},
			share() {
				this.$refs.popup.open()
			},
			getLink() {
				let php = '';
				let obj = {};
				if (this.bigcate == 1) {
					php = "duoduo";
					obj = {
						id: this.data.id,
						searchId: this.data.id
					}
					this.$axios('Goods/shareProductLink', 'POST', php, obj).then(res => {
						// this.code = res.data.code;
						// this.linkinfo = res.data.data.we_app_info;
						if (res.data.code == 200) {
							this.link = res.data.data.dk_password;
						}
					})
				} else if (this.bigcate == 2) {
					php = "douyin";
					obj = {
						goods_id: this.id
					}
					this.$axios('Goods/shareProductLink', 'POST', php, obj).then(res => {
						this.link = res.data.data.dk_password;
					})
				}
			},
			getDetail() {
				let php = '';
				if (this.bigcate == 1) {
					php = "duoduo";
				} else if (this.bigcate == 2) {
					php = "douyin";
				}
				this.$axios('Goods/goodsDetail', 'POST', php, {
					goods_id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.data = res.data.data;
						uni.setNavigationBarTitle({
							title: this.data.title
						})
						this.getLink();
					}
				})
			},
			prevImage(v,arr) {
				uni.previewImage({
					current: v,
					urls: arr
				})
			},
			swiperChange(e) {
				var that = this;
				that.current = e.detail.current + 1;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #f4f4f4;
	}

	.after_two {
		background-color: #fff;
		background: #fff;
		border-radius: 5rpx;
		margin-top: 15rpx;
		padding: 20rpx;

		.af_bt {
			margin-top: 15rpx;
			color: #8615E1;
			font-weight: bold;
		}
	}

	.swiper {
		position: relative;

		.s_swiper {
			height: 700rpx;
			width: 100%;

			.s_swiper_image {
				height: 100%;
				width: 100%;
				position: relative;
			}

			.s_swiper_item {
				position: relative;
			}
		}

		.indicator {
			background: rgba(97, 88, 90, 0.5);
			border-radius: 4rpx;
			color: #fff;
			font-size: 26rpx;
			padding: 6rpx 16rpx;
			position: absolute;
			right: 40rpx;
			bottom: 20rpx;
		}
	}

	.content {
		padding: 10rpx 20rpx 220rpx;

		.bold {
			font-weight: bold;
			font-size: 36rpx;
			margin-top: -10rpx;

			text {
				font-size: 26rpx;
			}
		}

		.one {
			border-radius: 5rpx;
			background: #fff;
			padding: 20rpx;
			margin-top: 10rpx;

			.price {
				line-height: 2;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.money {
					.new {
						margin-right: 10rpx;
						display: inline-block;
					}

					.old {
						text-decoration: line-through;
						color: #999;
					}
				}

				.back {
					color: #ff3333;
				}

				.sales {
					color: #969696;
				}

				.after {
					display: flex;
					align-items: center;

					&::before {
						content: '';
						width: 2rpx;
						height: 70rpx;
						background: #f4f4f4;
						display: block;
						margin-right: 20rpx;
					}
				}
			}

			.title {
				line-height: 1.4;
				font-size: 34rpx;
				margin-top: 8rpx;

				.tag {
					border-radius: 5rpx;
					color: #fff;
					font-size: 16rpx;
					float: left;
					margin-top: 7rpx;
					width: 56rpx;
					height: 34rpx;
					text-align: center;
					line-height: 34rpx;
					margin-right: 10rpx;
				}

				.tag_red {
					background: #f40009;
				}

				.tag_black {
					background: #141414;
				}
			}

			.coupon {
				position: relative;
				height: 140rpx;
				margin-top: 30rpx;

				.bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}

				.info {
					width: 100%;
					height: 100%;
					padding: 0 40rpx 0 25rpx;
					position: absolute;
					display: flex;
					justify-content: space-between;
					color: #ff3333;
					font-size: 30rpx;
					align-items: center;
					line-height: 1.6;

					.c_money {
						font-weight: bold;
						font-size: 34rpx;
						margin-right: 38rpx;
					}

					.flex1 {
						flex: 1;
						font-size: 28rpx;
					}
				}
			}
		}

		.two {

			display: flex;
			align-items: center;


			image {
				width: 30rpx;
				margin-right: 20rpx;
			}
		}

		.detail {
			padding: 35rpx 0 0;

			.sub {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				&::after,
				&::before {
					content: '';
					width: 50rpx;
					height: 3rpx;
					background: #333;
					display: block;
					margin: 0 20rpx;
				}
			}

			image {
				width: 100%;
				display: block;
			}
		}
	}

	.buttons {
		position: fixed;
		bottom: 0;
		background: #fff;
		width: 100%;
		padding: 20rpx 20rpx 30rpx;
		display: flex;
		justify-content: space-between;

		.button {
			border: 1rpx solid #d4d4d4;
			text-align: center;
			padding: 25rpx 0;
			width: 100%;
			border-radius: 50rpx;
		}

		.go {
			background: $bg-color;
			color: #fff;
			border: 1rpx solid $bg-color;
		}

		.w100 {
			width: 100%;
		}
	}

	.p_list {
		display: flex;
		padding: 30rpx;
		text-align: center;

		.p_item {
			margin-right: 30rpx;
			font-size: 24rpx;
			color: #646464;
			margin-left: 0;
			background: none;
			line-height: 1;

			&::after {
				border: none;
			}

			image {
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.buyAlert {
		width: 80%;
		border-radius: 15rpx;
		text-align: center;
		background-color: #fff;
		padding: 40rpx 30rpx;
		margin: 0 auto;

		.tit {
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}

		.link {
			background: #f4f4f4;
			padding: 40rpx 30rpx;
			margin-bottom: 30rpx;
		}

		button {
			font-size: 26rpx;
			background: #141414;
			color: #fff;
			line-height: 50rpx;
			padding: 16rpx;
			&::after {
				border: none;
			}
		}
	}
</style>